<template>
  <div>
    <div class="title"><image src="/static/search.svg" class="search" mode="widthFix" /><image src="/static/furhter_logo.svg" class="logo" mode="widthFix" /></div>
    
    <div class="top"><span>关于</span><i></i><p>在这里，了解我们。</p></div>

    <div class="box">
     <image src="/static/fm.jpg" class="box_img" mode="widthFix" />
     <p>Further，由北京师范大学附属中学（以下简称「北京师大附中」）学生发起的校园文化品牌，产品包含杂志出版物、新媒体、视频、文化周边等。目前，旗下《附中人Further》杂志已是全国中学生校园刊物中最专业、最精美、口碑最佳的产品，单期发行量逾千册，被《三联生活周刊》报道为「最酷的中学生杂志」。<br/>
我们深信，每个学生的视野都不该局限于课桌、试卷与标准答案，我们倡导常识、新知、生活与故事，鼓励独立思考并投身实践，致力于书写具有广泛意义的校园故事。走向更远，不止于远，这是属于我们的一颗冠军的心。<br/>
杂志读者涵盖全校初高中师生、校友及学生家长，读者群超万人。目前，《附中人Further》的影响力正在慢慢扩大，不仅与北京其他十余所优质高中建立联系，也通过网络将杂志送至全国各地，甚至远销海外。
<image src="/static/fu.svg" class="box_fu" mode="widthFix" />
</p>
    </div>

    <div class="hr"></div>
    <div class="post_t">你可以从以下内容更加了解我们：</div>

    <div class="post">
      <div class="post_box">
        <image src="/static/Rectangle.jpg" class="postimg" mode="widthFix" />
        <div class="postr">
          <span>02 otc.2018  ·  媒体报道</span>
          <em>他们办了一本最酷的中学生杂志</em>
          <i></i>
          <p>这本杂志所展现的世界是如此的熟悉又陌生：这是一所高中里正在上演的中学生的日常生活，但视野与视角又不囿于校园围墙内。“不像是一本中学生杂志！”或许正是这种意外，吸引墙外的人来探究中学教育的可能性。</p>
        </div>
      </div>
      <div class="post_box">
        <image src="/static/Rectangle.jpg" class="postimg" mode="widthFix" />
        <div class="postr">
          <span>02 otc.2018  ·  媒体报道</span>
          <em>他们办了一本最酷的中学生杂志</em>
          <i></i>
          <p>这本杂志所展现的世界是如此的熟悉又陌生：这是一所高中里正在上演的中学生的日常生活，但视野与视角又不囿于校园围墙内。“不像是一本中学生杂志！”或许正是这种意外，吸引墙外的人来探究中学教育的可能性。</p>
        </div>
      </div>
      <div class="post_box">
        <image src="/static/Rectangle.jpg" class="postimg" mode="widthFix" />
        <div class="postr">
          <span>02 otc.2018  ·  媒体报道</span>
          <em>他们办了一本最酷的中学生杂志</em>
          <i></i>
          <p>这本杂志所展现的世界是如此的熟悉又陌生：这是一所高中里正在上演的中学生的日常生活，但视野与视角又不囿于校园围墙内。“不像是一本中学生杂志！”或许正是这种意外，吸引墙外的人来探究中学教育的可能性。</p>
        </div>
      </div>
    </div>

    <div class="hr2"></div>
    <div class="footer">向上滑动，查看更多关于我们的文章</div>

  </div>
</template>

<script>
export default {
  data () {
  },

  methods: {
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.search{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.top{width: 100%; height: auto; display: block; float: left; margin:80px 0 10px; font-size: 30px; color: #000000; text-align: center;}
.top span{width: 100%; height: auto; display: block; float: left;margin: 0 0 15px;font-family: Source Han Serif SC; }
.top i{width: 24px; height: 2px; display: block; float: left; background: #F62525; margin: 0 175.5px 18px}
.top p{width: 240px; height: auto; display: block; float: left;  line-height: 22px; color: rgba(0,0,0,.4); font-size: 14px;font-family: PingFang SC;margin: 0 67.5px 0px }
.box{width: 88%; height: auto; display: block; float: left;margin:23px 6% 0; }
.box_img,.box image{width: 100%; height: auto; display: block; float: left;margin:5px 0 ; }
.box p{width: 100%; height: auto; display: block; float: left;margin:5px 0; font-size: 15px; line-height: 28px;color:rgba(0,0,0,.65);}
.box image.box_fu{width: 14px; height: 14px; display:inline-block;float: none;margin: 2px 0 0 2px;}
.hr,.hr2{width:60px; height: 1px; background: rgba(0,0,0,.1);display: block; float:left;margin:75px 157.5px; }
.post_t{width: 88%; height: auto; display: block; float: left;margin:0 6% 10px; font-size: 14px; line-height: 22px;color:rgba(0,0,0,.4);}
.post{width: 88%; height: auto; display: block; float: left;margin:0 6% 5px;}
.post_box{width: 100%; height: auto; display: block; float: left;margin:25px 0;}
.postimg{width: 80px; height: 80px; display: block; float: left;}
.postr{width: 223px; height: auto; display: block; float: right;}
.postr span{width: 100%; height: auto; display: block; float: left;font-size: 12px; line-height: 20px;color:rgba(0,0,0,.6); font-family:  PingFang SC, Martel;}
.postr em{width: 100%; height: auto; display: block; float: left;margin: 0; font-size: 21px; line-height: 26px;color:rgba(0,0,0,1); font-family: Martel, Source Han Serif SC;}
.postr i{width: 15px; height: 2px; display: block; float: left;margin:5px 0; background: #F62525; margin: 10px 0;}
.postr p{width: 100%; height: auto; display: block; float: left;font-size: 12px; line-height: 17px;color:rgba(0,0,0,.4); font-family: PingFang SC;}
.hr2{margin:0 157.5px; }
.footer{width: 100%; height: 58px; display: block; float: left;font-size: 12px; line-height: 58px;color:rgba(0,0,0,1); text-align: center;}
</style>